<template>
  <!-- 登录页面 -->
  <div>
    <Row class="container">
      <i-col span="13" offset="2" class="login-img-box">
        <img src="static/img/sale.jpg" alt="" />
      </i-col>
      <i-col span="7" class="login-box">
        <div class="login-container">
          <div class="login-header">
            <p>欢迎登录</p>
          </div>
          <div class="form-box">
            <Form ref="formInline" :model="formDate" :rules="ruleInline">
              <FormItem prop="username">
                <i-input
                  type="text"
                  v-model="formDate.username"
                  clearable
                  size="large"
                  placeholder="用户名"
                >
                  <Icon type="person" slot="prepend"></Icon>
                </i-input>
              </FormItem>
              <FormItem prop="password">
                <i-input
                  type="password"
                  v-model="formDate.password"
                  clearable
                  size="large"
                   @keyup.enter.native="handleSubmit('formInline')"
                  placeholder="密码"
                >
                  <Icon type="ios-locked-outline" slot="prepend"> </Icon>
                </i-input>
              </FormItem>
              <FormItem>
                <Button
                  type="error"
                  size="large"
                  @click="handleSubmit('formInline')"
                  long
                  >登录</Button
                >
              </FormItem>
            </Form>
          </div>
        </div>
      </i-col>
    </Row>
  </div>
</template>

<script>
import store from '@/vuex/store';
import { mapMutations, mapActions, mapState } from 'vuex';
export default {
  store,
  name: 'Login',

  data () {
    return {
      formDate: {
        username: '',
        password: ''
      },
      ruleInline: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          {
            type: 'string',
            min: 6,
            message: '密码不能少于6位',
            trigger: 'blur'
          }
        ]
      }
    };
  },
  computed: {
    ...mapState(['userInfo', 'userList'])
  },

  methods: {
    ...mapMutations(['SET_USER_LOGIN_INFO', 'EDIT_ATRR']),
    ...mapActions(['login']),
    handleSubmit (name) {
      const father = this;
      this.$refs[name].validate(valid => {
        if (valid) {
          const user = this.userList.filter((item) => {
            return item.username === this.formDate.username;
          });
          if (user.length === 0) {
            this.$Message.error('用户不存在');
            return;
          }
          const pwd = user[0].password === this.formDate.password;
          if (pwd) {
            this.SET_USER_LOGIN_INFO(user[0]);
            localStorage.setItem('loginInfo', user[0].username);
            localStorage.setItem('login-info', JSON.stringify(user[0]));
            // localStorage.setItem('useratrr', user[0].atrr);
            this.EDIT_ATRR(user[0].atrr);
            this.$Message.success('登录成功');
            father.$router.push('/');
          } else {
            this.$Message.error('用户名或密码错误');
          }
        } else {
          this.$Message.error('请填写正确的用户名或密码');
        }
      });
    }
  }
};
</script>

<style scoped>
.container {
  margin-top: 30px;
  height: 571px;
  background-color: #fff;
}

.login-img-box {
  height: 485px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-img-box > img {
  width: 68%;
}

.login-box {
  height: 485px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-container {
  width: 80%;
  height: 280px;
  /* border: rgba(0, 0, 0, 0.5) solid 1px; */
  box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.5);
  border-radius: 5px;
}

.login-header {
  height: 50px;
  font-size: 20px;
  text-align: center;
  line-height: 50px;
  letter-spacing: 5px;
  color: #fff;
  background-color: #ed3f14;
}

.form-box {
  width: 80%;
  margin: 30px auto;
}

</style>
